<!--
 * @Author: hucc
 * @Date: 2021-10-09 16:02:56
 * @LastEditors: hucc
 * @LastEditTime: 2021-10-10 17:45:37
 * @Description: 
-->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/vue.js"></script>
</head>

<body>
    <div id="app">
        {{userInfo}}
        <!-- @submit.prevent:阻止事件默认行为 form表单默认事件是点击提交刷新页面 我们要在控制台拿到结果，所以得阻止默认事件发生 -->
        <form @submit.prevent="formClickHandler">
            <!-- .trim  消除首尾空白字符 -->
            <!-- .lazy:v-model由原来得input触发转成change触发 即当输入完成后 光标定格在Input框外面输出结果 -->
            用户名：<input type="text" v-model.lazy.trim="userInfo.username"> <br> 密码：
            <input type="password" v-model="userInfo.password"><br> 手机号：
            <!-- .number 将当前输入框的输入值自动转为number类型 本来输入的值输出是字符串类型-->
            <input type="number" v-model.number="userInfo.telephone"><br> 性别：
            <input type="radio" value='male' v-model="userInfo.gender">男<input type="radio" value='female' v-model="userInfo.gender">女<br> 爱好：
            <input type="checkbox" value='basketball' v-model="userInfo.hobby">篮球 <input type="checkbox" value='football' v-model="userInfo.hobby">足球 <input type="checkbox" value='pingpong' v-model="userInfo.hobby">乒乓球<br> 城市：
            <select name="" id="" v-model="userInfo.city">
                <option value="sz">苏州</option>
                <option value="bj">北京</option>
                <option value="sh">上海</option>
                <option value="nj">南京</option>
            </select>
            <br> 个人简介：
            <textarea name="" id="" cols="30" rows="10" v-model.number="userInfo.introduce"></textarea>
            <br>
            <button @click="formClickHandler">提交</button>
        </form>
    </div>
    <script>
        let vm = new Vue({
            el: '#app',
            data: {
                userInfo: {
                    //给复选框设置空数组
                    hobby: []
                }
            },
            methods: {
                formClickHandler() {
                    console.log(JSON.stringify(this.userInfo));
                }
            },
            created() {}
        })
    </script>
</body>

</html>